<template>
	<view class="container">
		<uni-section title="发布采购明细" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :rules="rules" :model="preFormData" labelWidth="80px">
					<uni-forms-item label="类型">
						<uni-easyinput disabled v-model="preFormData.type" />
					</uni-forms-item>
					<uni-forms-item label="品类名称" required name="shopName">
						<uni-easyinput v-model="preFormData.shopName" placeholder="请输入品类名称" />
					</uni-forms-item>
					<uni-forms-item label="指定产地" required>
						<uni-data-picker @change="getCity" :localdata="cityData" popup-title="请选择产地城市"
							placeholder="请选择产地城市">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="采购截止时间" name="purchaseEndDays">
						<uni-datetime-picker type="date" return-type="date" v-model="preFormData.purchaseEndDays"
							:start=startDate placeholder="请选择采购截止时间" />
					</uni-forms-item>
					<uni-forms-item label="是否计划找车" required>
						<uni-data-select v-model="preFormData.needCar" :localdata="planCarRange" @change="change">
						</uni-data-select>
					</uni-forms-item>

					<uni-forms-item label="采购量(kg)" required name="shopPurchaseNum">
						<uni-easyinput v-model="preFormData.shopPurchaseNum" type="number" placeholder="请选择采购量" />
					</uni-forms-item>
					<uni-forms-item label="收货地点" required>
						<uni-data-picker @change="getRecCity" :localdata="cityData" popup-title="请选择收货地点城市">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="采购价位(kg/元)" required name="purchasePrice">
						<uni-easyinput v-model="preFormData.purchasePrice" type="number" placeholder="请选择采购价位" />
					</uni-forms-item>
					<uni-forms-item label="联系人" required name="userName">
						<uni-easyinput v-model="preFormData.userName" placeholder="请输入联系人姓名" />
					</uni-forms-item>
					<uni-forms-item label="联系电话" required name="userPhone">
						<uni-easyinput v-model="preFormData.userPhone" placeholder="请输入联系电话" />
					</uni-forms-item>

					<uni-forms-item label="供需要求">
						<uni-easyinput type="textarea" v-model="preFormData.shopDescription" placeholder="请输入供需要求..." />
					</uni-forms-item>
					<text>若有其他收费项或者特色，请在此补充。<text
							style="color:rgba(252, 151, 195, 0.6)">为保护安全隐私，请勿留下任何联系方式</text></text>
				</uni-forms>
				<button class="sub-type" type="primary" @click="submit('baseForm')">发布</button>

			</view>
		</uni-section>
	</view>
</template>

<script>
	import cityJson from '@/data/cityData.json'
	import {
		add_purchase
	} from '@/common/pre-order.js'
	import datejs from 'dayjs'

	export default {
		data() {

			return {
				startDate: Date.now(),
				// 基础表单数据
				preFormData: {
					type: '',
					shopName: '',
					address: '',
					purchaseEndDays: 0,
					needCar: 0, //是否需要派车
					shopPurchaseNum: null, //采购数量
					// shopchasePriceUnit: 'kg',
					recAdress: '', //交货地点
					purchasePrice: null,
					shopDescription: '', //采购说明
					purchasePriceUnit: '元/kg',
					shopPurchaseNumUnit: 'kg',
					userName: '',
					//采购周期
					purchaseRange: 0,
					purchase: 0, //是否是预购
					preUserId: '', //发布人ID
					userPhone: '',
					shopUserType: 0
				},
				cityData: cityJson,
				planCarRange: [{
						value: 0,
						text: "否"
					},
					{
						value: 1,
						text: "是"
					}
				],

				// 校验规则
				rules: {
					shopName: {
						rules: [{
							required: true,
							errorMessage: '采购物品名称不能为空'
						}]
					},
					purchaseEndDays: {
						rules: [{
							required: true,
							errorMessage: '截止时间不能为空'
						}]
					},
					shopPurchaseNum: {
						rules: [{
							required: true,
							errorMessage: '采购量不能为空'
						}, {
							format: 'number',
							errorMessage: '采购量只能输入数字'
						}]
					},
					
					purchasePrice: {
						rules: [{
							required: true,
							errorMessage: '采购价位不能为空'
						}, {
							format: 'number',
							errorMessage: '采购价位只能输入数字'
						}]
					},
					recAdress: {
						rules: [{
							required: true,
							errorMessage: '收获地点不能为空'
						}]
					},
					userName: {
						rules: [{
							required: true,
							errorMessage: '联系人姓名不能为空'
						}]
					},
					userPhone: {
						rules: [{
								required: true,
								errorMessage: '联系电话不能为空'
							},
							{
								pattern: '(^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$)',
								errorMessage: '手机号格式不正确'
							}
						]
					},
				},
			}
		},
		onShow() {
			if (getApp().globalData.userInfo.id) {
		
			} else {
				uni.navigateTo({
					url: '/pages/loginOnlyPhone/loginOnlyPhone'
				})
			}
		},
		onLoad: function(option) {
			console.log(option)
			this.preFormData.type = option.info + '(' + option.source + ')'
			this.preFormData.purchase = option.sourceIndex
			this.preFormData.purchaseRange = option.purchaseIndex
			this.preFormData.preUserId = getApp().globalData.userInfo.id
			this.preFormData.shopUserType = option.infoIndex

		},
		methods: {
			submit(ref) {
				//校验表单
				this.$refs[ref].validate().then(res => {
					const d1 = datejs(this.preFormData.purchaseEndDays)
					const d2 = datejs(Date.now())
					this.preFormData.purchaseEndDays = d1.diff(d2, 'day')
					//验证通过
					// console.log('传递参数为：' + JSON.stringify(this.preFormData));
					var data = this.preFormData
					//todo 调用接口传递数据
					add_purchase(data).then(result => {
						uni.showModal({
							title: '采购信息发布状态',
							content: '采购信息发布成功，是否继续发布？',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定')
									uni.navigateTo({
										url: '/pages/issue-purchase/issue-purchase'
									})
								} else if (res.cancel) {
									//跳转回首页列表
									uni.reLaunch({
										url: '/pages/tabbar/tabbar-1/tabbar-1'
									})
								}
							}
						})
					}).catch(err => {
						uni.showModal({
							title: '采购信息发布状态',
							content: '' + err.msg,
							showCancel: false,
						})
					})
				}).catch(err => {
					console.log('表单校验异常')
				})
			},
			getCity(e) {
				//暂存相关的数据
				let result = ''
				var value = e.detail.value
				for (let key of value) {
					result += key.text + '-'
				}
				this.preFormData.address = result.slice(0, result.length - 1)
			},
			getRecCity(e) {
				//暂存相关的数据
				let result = ''
				var value = e.detail.value
				for (let key of value) {
					result += key.text + '-'
				}
				this.preFormData.recAdress = result.slice(0, result.length - 1)
			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.sub-type {
		margin-top: 15px;
	}
</style>
